<template>
  <v-container fluid class="pa-0">
    <!-- 轮播图部分 -->
    <v-carousel
      cycle
      height="500"
      hide-delimiter-background
      show-arrows="hover"
      interval="5000"
    >
      <v-carousel-item
        v-for="(slide, i) in carouselSlides"
        :key="i"
        :src="slide.image"
        cover
      >
        <div class="carousel-overlay d-flex flex-column justify-center align-start pa-10">
          <h2 
            class="text-h2 font-weight-bold text-white animate-title mb-4"
            :style="{animationDelay: '0.3s'}"
          >
            {{ $t(slide.title) }}
          </h2>
          <p 
            class="text-h5 text-white animate-subtitle"
            :style="{animationDelay: '0.8s'}"
          >
            {{ $t(slide.subtitle) }}
          </p>
          <v-btn
            color="primary"
            class="mt-6 animate-button"
            :style="{animationDelay: '1.3s'}"
            :to="slide.buttonLink"
            large
            elevation="2"
          >
            {{ $t(slide.buttonText) }}
          </v-btn>
        </div>
      </v-carousel-item>
    </v-carousel>

    <!-- 应用领域展示模块 -->
    <ApplicationFields />

    <!-- 产品栏目 -->
    <FeaturedProducts :products="featuredProducts" />
    
    <!-- 气体中心模块 -->
    <GasCenter />
  </v-container>
</template>

<script>
import ApplicationFields from '@/components/ApplicationFields.vue'
import FeaturedProducts from '@/components/FeaturedProducts.vue'
import GasCenter from '@/components/GasCenter.vue'

export default {
  components: {
    ApplicationFields,
    FeaturedProducts,
    GasCenter
  },
  data() {
    return {
      carouselSlides: [
        {
          image: 'https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg',
          title: 'carousel.slide1.title',
          subtitle: 'carousel.slide1.subtitle',
          buttonText: 'carousel.slide1.button',
          buttonLink: '/products'
        },
        {
          image: 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg',
          title: 'carousel.slide2.title',
          subtitle: 'carousel.slide2.subtitle',
          buttonText: 'carousel.slide2.button',
          buttonLink: '/about'
        },
        {
          image: 'https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477_1280.jpg',
          title: 'carousel.slide3.title',
          subtitle: 'carousel.slide3.subtitle',
          buttonText: 'carousel.slide3.button',
          buttonLink: '/contact'
        }
      ],
      featuredProducts: [
        // ... 产品数据
      ]
    }
  },
  methods: {
    goToProductDetail(productId) {
      this.$router.push(`/product-detail?id=${productId}`);
    }
  }
}
</script>